/* *
 * ---------------------------------------- *
 * 城市选择组件 v1.0
 * Author: VVG
 * QQ: 83816819
 * Mail: mysheller@163.com
 * http://www.cnblogs.com/NNUF/
 * ---------------------------------------- *
 * Date: 2012-07-10
 * ---------------------------------------- *
 * */

/* *
 * 全局空间 Vcity
 * */
var Vcity = {};
/* *
 * 静态方法集
 * @name _m
 * */
Vcity._m = {
    /* 选择元素 */
    $:function (arg, context) {
        var tagAll, n, eles = [], i, sub = arg.substring(1);
        context = context || document;
        if (typeof arg == 'string') {
            switch (arg.charAt(0)) {
                case '#':
                    return document.getElementById(sub);
                    break;
                case '.':
                    if (context.getElementsByClassName) return context.getElementsByClassName(sub);
                    tagAll = Vcity._m.$('*', context);
                    n = tagAll.length;
                    for (i = 0; i < n; i++) {
                        if (tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
                    }
                    return eles;
                    break;
                default:
                    return context.getElementsByTagName(arg);
                    break;
            }
        }
    },

    /* 绑定事件 */
    on:function (node, type, handler) {
        node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on' + type, handler);
    },

    /* 获取事件 */
    getEvent:function(event){
        return event || window.event;
    },

    /* 获取事件目标 */
    getTarget:function(event){
        return event.target || event.srcElement;
    },

    /* 获取元素位置 */
    getPos:function (node) {
        var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft,
            scrollt = document.documentElement.scrollTop || document.body.scrollTop;
        var pos = node.getBoundingClientRect();
        return {top:pos.top + scrollt, right:pos.right + scrollx, bottom:pos.bottom + scrollt, left:pos.left + scrollx }
    },

    /* 添加样式名 */
    addClass:function (c, node) {
        if(!node)return;
        node.className = Vcity._m.hasClass(c,node) ? node.className : node.className + ' ' + c ;
    },

    /* 移除样式名 */
    removeClass:function (c, node) {
        var reg = new RegExp("(^|\\s+)" + c + "(\\s+|$)", "g");
        if(!Vcity._m.hasClass(c,node))return;
        node.className = reg.test(node.className) ? node.className.replace(reg, '') : node.className;
    },

    /* 是否含有CLASS */
    hasClass:function (c, node) {
        if(!node || !node.className)return false;
        return node.className.indexOf(c)>-1;
    },

    /* 阻止冒泡 */
    stopPropagation:function (event) {
        event = event || window.event;
        event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
    },
    /* 去除两端空格 */
    trim:function (str) {
        return str.replace(/^\s+|\s+$/g,'');
    }
};

/* 所有城市数据,可以按照格式自行添加（北京|beijing|bj），前16条为热门城市 */

Vcity.allCity = [
    '全国|quanguo|qg','北京|beijing|bj','上海|shanghai|sh','江苏|jiangsu|js','广东|guangdong|gd','山东|shandong|sd','南京|nanjing|nj','杭州|hangzhou|hz','成都|chengdu|cd','苏州|suzhou|sz','武汉|wuhan|wh','无锡|wuxi|ww','哈尔滨|haerbin|heb',
    '深圳|shenzhen|sz','茂名|maoming|mm','湘潭|xiangtan|xt','烟台|yantai|yt','南阳|nanyang|ny','厦门|xiamen|xm','广州|guangzhou|gz','大连|dalian|dl','南昌|nanchang|nc','铜仁|tongren|tr',
    '浙江|zhejiang|zj', '徐州|xuzhou|xz','重庆|chongqing|cq','渭南|weinan|wn','长沙|changsha|cs','九江|jiujiang|jj','济南|jinan|jn','郑州|zhengzhou|zz','惠州|huizhou|hz','青岛|qingdao|qd','长春|changchun|cc',
    '盐城|yancheng|yc', '亳州|haozhou|hz','四川|sichuan|sc','天津|tianjin|tj','天水|tianshui|ts','镇江|zhenjiang|zj','泉州|quanzhou|qz','眉山|meishan|ms','佛山|foshan|fs','福州|fuzhou1|fz1','扬州|yangzhou|yz',
    '西安|xian|xa','西宁|xining|xn', '荆州|jingzhou|jz','福建|fujian|fj','衡阳|hengyang|hy','株洲|zhuzhou|zz1','南通|nantong|nt','遂宁|suining|sn','珠海|zhuhai|zh',
    '宁波|ningbo|nb','淄博|zibo|zb','绵阳|mianyang|my','黄冈|huanggang|hg', '南宁|nanning|nn','泸州|luzhou|lz','景德镇|jingdezhen|jdz','威海|weihai|wh','辽源|liaoyuan|ly','龙华|longhua|lh',
    '常州|changzhou|cz','太原|taiyuan|ty','衡水|hengshui|hs','包头|baotou|bt', '邵阳|shaoyang|sy','银川|yinchuan|yy','怀化|huaihua|hh','盘锦|panjin|pj','东莞|dongguan|dg',
    '南充|nanchong|nc','合肥|hefei|hf','中山|zhongshan|zs','新疆|xinjiang|xj','延安|yanan|yy', '张家口|zhangjiako|zjk','泰州|taizhou1|tz1','三明|sanming|sm','石家庄|shijiazhua|sjz','昆明|kunming|km',
    '常德|changde|cd','佳木斯|jiamusi|jms','平顶山|pingdingsh|pds','山西|shanxi|sx', '十堰|shiyan|sy', '梅州|meizhou|mz','遵义|zunyi|zy','鞍山|anshan|as','广元|guangyuan|gy','安阳|anyang|ay',
    '吉林|jilin1|jl','贵阳|guiyang|gy','芜湖|wuhu|wh','乌兰察布|wulanchabu|wlcb', '玉溪|yuxi|yx','嘉兴|jiaxing|jx','湛江|zhanjiang|zj', '大理|dali|dl','义乌|yiwu|yw','信阳|xinyang|xy','楚雄|chuxiong|cx',
    '宜宾|yibin|yb','井冈山|jinggangsh|jgs','池州|chizhou|cz', '国外|guowai|gw','曲阜|qufu|qf','商丘|shangqiu|sq','桐乡|tongxiang|tx','六盘水|liupanshui|lps', '呼和浩特|huhehaote|hhht','淮南|huainan|hn',
    '兰州|lanzhou|lz','河南|henan|hn','开远|kaiyuan|ky', '上虞|shangyu|sy','哈密|hami|hm','宣州|xuanzhou|xz','马鞍山|maanshan|mas','慈溪|cixi|cx','台中|taizhong|tz', '泰安|taian|ta','三亚|sanya|sy',
    '温州|wenzhou|wz','齐齐哈尔|qiqihaer|qqhe','昆山|kunshan|ks', '宿迁|suqian|sq','石河子|shihezi|sjz','广西|guangxi|gx','益阳|yiyang|y','台州|taizhou|tz','江西|jiangxi|jx', '漳州|zhangzhou|zz',
    '汕头|shantou|st','宜兴|yixing|yx','潍坊|weifang|wf','保定|baoding|bd','云南|yunnan|yn', '诸暨|zhuji|zj','淮安|huaian|ha','湖南|hunan|hn','牡丹江|mudanjiang|mdj','防城港|fangchengg|fcg',
    '百色|baise|bs','乌鲁木齐|wulumuqi|wlmq','湖北|hubei|hb','蚌埠|bangbu|bb','洛阳|luoyang|ly','龙岩|longyan|ly', '潮州|chaozhou|cz','湖州|huzhou|hz','漯河|luohe|lh','桂林|guilin|gl','上饶|shangrao|sr',
    '海口|haikou|hk', '黄石|huangshi|hs','临海|linhai|lh','白城|baicheng|bc','临沧|lincang|lc','沈阳|shenyang|sy','邢台|xingtai|xt', '开封|kaifeng|kf','运城|yuncheng|yc','岳阳|yueyang|yy',
    '东营|dongying|dy','乌海|wuhai|wh','安徽|anhui|ah', '阜阳|fuyang|fy','新余|xinyu|xy','张掖|zhangye|zy','北海|beihai|bh','绍兴|shaoxing|sx','日照|rizhao|rz',
    '石嘴山|shizuishan|szs','咸阳|xianyang|xy','秦皇岛|qinhuangda|qhd','襄樊|xiangfan|xf','陕西|shanxi|sx', '赣州|ganzhou|gz','邯郸|handan|hd','青州|qingzhou|qz','荷泽|heze|hz','金华|jinhua|jh',
    '黑龙江|heilongjia|hlj', '韶关|shaoguan|sg','丽水|lishui|ls','沧州|cangzhou|cz','阳江|yangjiang|yj', '伊春|yichun1|yc','曲靖|qujing|qj','昭通|zhaotong|zt','耒阳|leiyang|ly',
    '衢州|quzhou|qz','甘肃|gansu|gs','六安|liuan|la', '西城|xicheng|xc','贵州|guizhou|gz','钦州|qinzhou|qz','揭阳|jieyang|jy','涟源|lianyuan|ly', '河北|hebei|hb','临汾|linfen|lf','江门|jiangmen|jm',
    '莆田|putian|pt','萍乡|pingxiang|px', '攀枝花|panzhihua|pzh','宁德|ningde|nd','宜昌|yichang|yc', '丹江口|danjiangko|djk','通化|tonghua|th','昌吉|changji|cj',
    '清远|qingyuan|qy','肇庆|zhaoqing|zq','唐山|tangshan|ts','恩施|enshi|es','济宁|jining|jn','聊城|liaocheng|lc','孝感|xiaogan|xg','周口|zhoukou|zk','滨州|binzhou|bz','三门峡|sanmenxia|smx',
    '滁州|chuzhou|cz', '平凉|pingliang|pl','海南|hainan2|ls','瓦房店|wafangdian|wfd','长治|changzhi|cz','枣庄|zaozhuang|zz','凉山|liangshan|ls','东山|dongshan|ds','嵊州|shenzhou|sz',
    '伊犁|yili|yl','临安|linan|la', '莱芜|laiwu|lw','郴州|chenzhou|cz','连云港|lianyungan|lyg','巢湖|chaohu|ch','鄂尔多斯|eerduosi|eeds','兴化|xinghua|xh','新乡|xinxiang|xx','宿州|suzhou1|sz',
    '江阴|jiangyin|jy', '乐山|leshan|ls','随州|suizhou|sz', '毕节|bijie|bj','永州|yongzhou|yz','黄山|huangshan|hs','大同|datong|dt','固原|guyuan|gy','安庆|anqing|aq','商洛|shangluo|sl','德阳|deyang|dy',
    '舟山|zhoushan|zs','赤峰|chifeng|cf', '丽江|lijiang|lj','喀什|kashi|ks', '吉安|jian1|ja','淮北|huaibei|hb','焦作|jiaozuo|jz','永安|yongan|ya','晋中|jinzhong|jz','洪江|hongjiang|hj',
    '晋城|jincheng|jz','河源|heyuan|hy','鹰潭|yingtan|yt', '营口|yingkou|yk','铁岭|tieling|tl', '华鉴|huajian|hj', '丹东|dandong|dd','达州|dazhou|dz','克拉玛依|kelamayi|klmy','吉首|jishou|js',
    '抚州|fuzhou|fz','定西|dingxi|dx','城中|chengzhong|cz','忻州|xinzhou|xz','内蒙古|neimenggu|nmg','铜川|tongchuan|tc', '歙县|xixian|xx', '天门|tianmen|tm','文昌|wenchang|wc','诸城|zhucheng|zc',
    '内江|neijiang|nj','辽宁|liaoning|ln','凯里|kaili|kl','濮阳|puyang|py','临沂|linyi|ly','鹤壁|hebi|hb','海宁|haining|hn','姜堰|jiangyan|jy','淮阴|huaiyin|hy', '津市|jinshi|js','湘乡|xiangxiang|xx',
    '湘西|xiangxi|xx','老河口|laohekou|lhk','汨罗|miluo|ml','济源|jiyuan|jy','应城|yingcheng|yc','驻马店|zhumadian|zmd','图门|tumen|tm','西昌|xichang|xc','广安|guangan|gz','迪庆|diqing|dq',
    '黔西|qianxi|qx','柳州|liuzhou|lz','承德|chengde|cd','武威|wuwei|ww','河西|hexi|hx','鸡西|jixi|jx','锦州|jinzhou|jz','朝阳|chaoyang|cy','赤水|chishui|cs','贵港|guigang|gg','涿州|zhuozhou|zz','辽阳|liaoyang|ly',
    '巴中|bazhong|bz','咸宁|xianning|xn','本溪|benxi|bx','德州|dezhou|dz','安顺|anshun|as','铜陵|tongling|tl','娄底|loudi|ld','雅安|yaan|ya','宝鸡|baoji|bj','黑河|heihe|hh','余姚|yuyao|yy','来宾|laibin|lb','梧州|wuzhou|wz',
    '琼海|qionghai|qh','榆林|yulin1|yl','七台河|qitaihe|qth','吕梁|lvliang|ll','文山|wenshan|ws','阜新|fuxin|fx','张家港|zhangjiaga|zjg','思茅|simao|sm','利川|lichuan|lc','冷水滩|lengshuita|lst','石狮|shishi|slz',
    '怒江|nujiang|nj','满洲里|manzhouli|mzl','保山|baoshan|bs','仙桃|xiantao|xt','黔南|qiannan|qn','绥化|suihua|sh','玉林|yulin|yl','拉萨|lasa|ls','常熟|changshu|cs','仪征|yizheng|yz','河池|hechi|hc','许昌|xuchang|xc',
    '甘孜|ganzi|gz','普陀|putuo|pt','安陆|anlu|al','藤州|tengzhou|tz','定州|dingzhou|dz','巴彦淖尔|bayannaoer|byze','张家界|zhangjiaji|zjj','嵊泗|guansi|ss','宜春|yichun|yc','宣城|xuancheng|xc','兴义|xingyi|xy',
    '汉中|hanzhong|hz','东台|dongtai|dt','德宏|dehong|dh','朔州|shuozhou|sz','榆次|yuci|yc','云浮|yunfu|yf','锡林浩特|xilinhaote|xlht','萧山|xiaoshan|xs','都匀|duyun|dy','和平|heping|hp','北安|beian|ba','鄂州|ezhou|ez',
    '长宁|changning|cn','抚顺|fushun|fs','汕尾|shanwei|sw','达县|daxian|dx','安康|ankang|ak','北票|beipiao|bp','海西|haixi|hx','巴音郭楞|bayinguole|bygl','果洛|guoluo|gl','东方|dongfang|df','南平|nanping|np','青海|qinghai|qh',
    '大庆|daqing|dq','阳泉|yangquan|yq','葫芦岛|huludao|hld','兴城|xingcheng|xc','麻城|macheng|mc','贺州|hezhou|hz','海东|haidong|hd','四平|siping|sp','自贡|zigong|zg','南宫|nangong|ng','红河|honghe|hh','廊坊|langfang|lf',
    '伊宁|yining|yn','西藏|xizang|xz','通什|tongshi|ts','崇左|chongzuo|cz','普洱|puer|pe','石首|shishou|ss','陇南|longnan|ll','香港|xianggang|xg','兰溪|lanxi|lx','东城|dongcheng|dc','黔东|qiandong|qd','荆门|jingmen|jm',
    '渝北|yubei|yb','万州|wanzhou|wz','石景山|shijingsha|sjs','梅河口|meihekou|hkh','江北|jiangbei|jb','宜城|yicheng|yc','阿勒泰|aletai|alt','临夏|linxia|lx','双鸭|shuangya|sy','潜江|qianjiang|qj','宁夏|ningxia|nx',
    '海拉尔|hailaer|hle','资阳|ziyang|zy','锦西|jinxi|jx','吴忠|wuzhong|wz','鹤岗|hegang|hg','通辽|tongliao|tl','乌兰浩特|wulanhaote|wlht','公主岭|gongzhulin|gzl','延吉|yanji|yj','椒江|jiaojiang|jj','集安|jian|ja',
    '嘉峪关|jiayuguan|jyg','共和|gonghe|gh','嘉定|jiading|jd','霍林郭勒|huolinguol|hlgl','和田|hetian|ht','汉川|hanchuan|hc','万宁|wanning|wn','玉树|yushu|ys','任丘|renqiu|rq','金昌|jinchang|jc','枣阳|zaoyang|zy',
    '西双|xishuang|xg','格尔木|geermu|gem','库尔勒|kuerle|kel','宝坻|baodi|bd','海北|haibei|hb','黄南|huangnan|hn','呼伦贝尔|hulunbeier|hlbe','九台|jiutai|jt','甘南|gannan|gn','阿克苏|akesu|aks','白银|baiyin|by',
    '大兴|daxing|dx','韩城|hancheng|hc','泊头|botou|bt','东胜|dongsheng|ds','博乐|bole|bl','扎兰屯|zhalantun|zlt','酒泉|jiuquan|jq','临河|linhe|lh','个旧|gejiu|gj','奎屯|kuitun|kt','牙克石|yakeshi|yks','二连浩特|erlianhaot|elht',
    '桦甸|huadian|hd','丹阳|danyang|dy','绥汾河|suifenhe|sfh','吐鲁番|tulufan|tlf','玉门|yumen|ym','儋州|zuozhou|zz','阿拉善盟|alashanmen|alsm','武穴|wuxue|wx','庆阳|qingyang|qy','德令哈|delingha|dlh','龙井|longjing|lj',
    '塔城|tacheng|tc','中卫|zhongwei|zw','顺义|shunyi|sy','集宁|jining1|jn','金山|jinshan|js','铜梁|tongliang|tl','垫江|dianjiang|dj','涪陵|fuling|fl','开县|kaixian|kx','海淀|haidian|hd','北碚|beixi|bp','延庆|yanqing|yq',
    '浦东|pudong|pd','彭水苗族土家族自治县|pengshuimi|psm','丰台|fengtai|ft','阿坝|aba|ab','绍兴县|shaoxingxi|sx','房山|fangshan|fs','静海|jinghai|jh','璧山|pushan|bs','南岸|nanan|na','通州|tongzhou|tz','綦江|qijiang|qj',
    '闵行|minxing|mh','红桥|hongqiao|hq','塘沽|tanggu|tg','津南|jinnan|ln','北辰|beichen|bc','怀柔|huairou|hr','巴南|banan|bn','密云|miyun|my','门头沟|mentougou|mtg','黔江|qianjiang1|qj','双鸭山|shuangyash|sys',
    '长寿|changshou|cs','崇明|chongming|cm','闸北|zhabei|zb','兴安盟|xinganmeng|xam','武清|wuqing|wq','江津|jiangjin|jj','平谷|pinggu|pg','五家渠|wujiaqu|wjq','合川|hechuan|hc','新市|xinshi|xs','昌平|changping|cp',
    '渝中|yuzhong|yz','潼南|luonan|dn','杨浦|yangpu|yp','沙坪坝|shapingba|spb','中宁|zhongning|zn','九龙坡|jiulongpo|jlp','菏泽|heze|hz','云阳|yunyang|yy','石柱土家族自治县|shizhutuji|szj','宝山|baoshan1|bc','宁河|ninghe|nh',
    '景洪|jinghong|jh','徐汇|xuhui|xh','临清|linqing|lq','丰都|fengdu|fd','大足|dazu|dz','永川|yongchuan|yc','酉阳土家族苗族自治县|youyangtuj|yx','荣昌|rongchang|rc','忠县|zhongxian|zx','枝城|zhicheng|zc','白山|baishan|bs',
    '松江|songjiang|sj','天山|tianshan|ts','奉节|fengjie|fj','浦东新|pudongxin|pdx','秀山土家族苗族自治县|xiushantuj|xstjz','河东|hedong|hd','南开|nankai|nk','蓟县|jixian|jx','城口|chengkou|ck','七台|qitai|qt',
    '锡林郭勒盟|xilinguole|xlgl','梁平|liangping|lp','南川|nanchuan|nc','义马|yima|ym','昌都|changdu|cd','万盛|wansheng|ws','延边|yanbian|yb','冷水江|lengshuiji|lsj','沙河|shahe|sh','达川|dachuan|dc',
    '巫山|wushan|ws', '邵武|shaowu|sw','黄浦|huangpu|hp','大港|dagang|dg','大渡口|dadukou|ddk','克孜勒苏|kezilesu|kzlu','东丽|dongli|dl','巫溪|wuxi1|wx','松原|songyuan|sy','武隆|wulong|wl',
    '同江|tongjiang|tj', '日喀则|rikaze|rkz','西青|xiqing|xq', '阿图什|atushi|ats','山南|shannan|sn','青浦|qingpu|qp','那曲|naqu|nq','五指山|wuzhishan|wzs','林芝|linzhi|lz','静安|jingan|ja',
    '南汇|nanhui|nh','汉沽|hangu|hg','襄阳|xiangyang|xy','琼山|qiongshan|qs'
];

/* 正则表达式 筛选中文城市名、拼音、首字母 */

Vcity.regEx = /^([\u4E00-\u9FA5\uf900-\ufa2d]+)\|(\w+)\|(\w)\w*$/i;
Vcity.regExChiese = /([\u4E00-\u9FA5\uf900-\ufa2d]+)/;

/* *
 * 格式化城市数组为对象oCity，按照a-h,i-p,q-z,hot热门城市分组：
 * {HOT:{hot:[]},ABCDEFGH:{a:[1,2,3],b:[1,2,3]},IJKLMNOP:{i:[1.2.3],j:[1,2,3]},QRSTUVWXYZ:{}}
 * */

(function () {
    var citys = Vcity.allCity, match, letter,
        regEx = Vcity.regEx,
        reg2 = /^[a-d]$/i, reg3 = /^[i-l]$/i, reg4 = /^[q-u]$/i,reg5 = /^[e-h]$/i, reg6 = /^[m-p]$/i, reg7 = /^[v-z]$/i;
    if (!Vcity.oCity) {
        Vcity.oCity = {hot:{}, ABCD:{}, EFGH:{}, IJKL:{}, MNOP:{}, QRSTU:{}, VWXYZ:{}};
        //console.log(citys.length);
        for (var i = 0, n = citys.length; i < n; i++) {
            match = regEx.exec(citys[i]);
            letter = match[3].toUpperCase();
            if (reg2.test(letter)) {
                if (!Vcity.oCity.ABCD[letter]) Vcity.oCity.ABCD[letter] = [];
                Vcity.oCity.ABCD[letter].push(match[1]);
            } else if (reg5.test(letter)) {
                if (!Vcity.oCity.EFGH[letter]) Vcity.oCity.EFGH[letter] = [];
                Vcity.oCity.EFGH[letter].push(match[1]);
            } else if (reg3.test(letter)) {
                if (!Vcity.oCity.IJKL[letter]) Vcity.oCity.IJKL[letter] = [];
                Vcity.oCity.IJKL[letter].push(match[1]);
            } else if (reg6.test(letter)) {
                if (!Vcity.oCity.MNOP[letter]) Vcity.oCity.MNOP[letter] = [];
                Vcity.oCity.MNOP[letter].push(match[1]);
            } else if (reg4.test(letter)) {
                if (!Vcity.oCity.QRSTU[letter]) Vcity.oCity.QRSTU[letter] = [];
                Vcity.oCity.QRSTU[letter].push(match[1]);
            } else if (reg7.test(letter)) {
                if (!Vcity.oCity.VWXYZ[letter]) Vcity.oCity.VWXYZ[letter] = [];
                Vcity.oCity.VWXYZ[letter].push(match[1]);
            }
            /* 热门城市 前16条 */
            if(i<16){
                if(!Vcity.oCity.hot['hot']) Vcity.oCity.hot['hot'] = [];
                Vcity.oCity.hot['hot'].push(match[1]);
            }
        }
    }
})();
/* 城市HTML模板 */
Vcity._template = [
    '<p class="tip">热门城市(支持汉字/拼音)</p>',
    '<ul>',
    '<li class="on">热门城市</li>',
    '<li>ABCD</li>',
    '<li>EFGH</li>',
    '<li>IJKL</li>',
    '<li>MNOP</li>',
    '<li>QRSTU</li>',
    '<li>VWXYZ</li>',
    '</ul>'
];

/* *
 * 城市控件构造函数
 * @CitySelector
 * */

Vcity.CitySelector = function () {
    this.initialize.apply(this, arguments);
};

Vcity.CitySelector.prototype = {

    constructor:Vcity.CitySelector,

    /* 初始化 */

    initialize :function (options) {
        var input = options.input;
        this.input = Vcity._m.$('#'+ input);
        this.inputEvent();
    },

    /* *
     * @createWarp
     * 创建城市BOX HTML 框架
     * */

    createWarp:function(){
        var inputPos = Vcity._m.getPos(this.input);
        var div = this.rootDiv = document.createElement('div');
        var that = this;

        // 设置DIV阻止冒泡
        Vcity._m.on(this.rootDiv,'click',function(event){
            Vcity._m.stopPropagation(event);
        });

        // 设置点击文档隐藏弹出的城市选择框
        Vcity._m.on(document, 'click', function (event) {
            event = Vcity._m.getEvent(event);
            var target = Vcity._m.getTarget(event);
            if(target == that.input) return false;
            if (that.cityBox)Vcity._m.addClass('hide', that.cityBox);
            if (that.ul)Vcity._m.addClass('hide', that.ul);
            if(that.myIframe)Vcity._m.addClass('hide',that.myIframe);
        });
        div.className = 'citySelector';
        div.style.position = 'absolute';
        div.style.left = inputPos.left - 23 + 'px';
        div.style.top = inputPos.bottom + 10 + 'px';
        div.style.zIndex = 999999;

        // 判断是否IE6，如果是IE6需要添加iframe才能遮住SELECT框
        var isIe = (document.all) ? true : false;
        var isIE6 = this.isIE6 = isIe && !window.XMLHttpRequest;
        if(isIE6){
            var myIframe = this.myIframe =  document.createElement('iframe');
            myIframe.frameborder = '0';
            myIframe.src = 'about:blank';
            myIframe.style.position = 'absolute';
            myIframe.style.zIndex = '-1';
            this.rootDiv.appendChild(this.myIframe);
        }

        var childdiv = this.cityBox = document.createElement('div');
        childdiv.className = 'cityBox';
        childdiv.id = 'cityBox';
        childdiv.innerHTML = Vcity._template.join('');
        var hotCity = this.hotCity =  document.createElement('div');
        hotCity.className = 'hotCity';
        childdiv.appendChild(hotCity);
        div.appendChild(childdiv);
        this.createHotCity();
    },

    /* *
     * @createHotCity
     * TAB下面DIV：hot,a-h,i-p,q-z 分类HTML生成，DOM操作
     * {HOT:{hot:[]},ABCDEFGH:{a:[1,2,3],b:[1,2,3]},IJKLMNOP:{},QRSTUVWXYZ:{}}
     **/

    createHotCity:function(){
        var odiv,odl,odt,odd,odda=[],str,key,ckey,sortKey,regEx = Vcity.regEx,
            oCity = Vcity.oCity;
        for(key in oCity){
            odiv = this[key] = document.createElement('div');
            // 先设置全部隐藏hide
            odiv.className = key + ' ' + 'cityTab hide';
            sortKey=[];
            for(ckey in oCity[key]){
                sortKey.push(ckey);
                // ckey按照ABCDEDG顺序排序
                sortKey.sort();
            }
            for(var j=0,k = sortKey.length;j<k;j++){
                odl = document.createElement('dl');
                odt = document.createElement('dt');
                odd = document.createElement('dd');
                odt.innerHTML = sortKey[j] == 'hot'?'&nbsp;':sortKey[j];
                odda = [];
                for(var i = 0,n = oCity[key][sortKey[j]].length;i<n; i++){
                    str = '<a href="javascript:">' + oCity[key][sortKey[j]][i] + '</a>';
                    odda.push(str);
                }
                odd.innerHTML = odda.join('');
                odl.appendChild(odt);
                odl.appendChild(odd);
                odiv.appendChild(odl);
            }

            // 移除热门城市的隐藏CSS
            Vcity._m.removeClass('hide',this.hot);
            this.hotCity.appendChild(odiv);
        }
        document.body.appendChild(this.rootDiv);
        /* IE6 */
        this.changeIframe();

        this.tabChange();
        this.linkEvent();
    },

    /* *
     *  tab按字母顺序切换
     *  @ tabChange
     * */

    tabChange:function(){
        var lis = Vcity._m.$('li',this.cityBox);
        var divs = Vcity._m.$('div',this.hotCity);
        var that = this;
        for(var i=0,n=lis.length;i<n;i++){
            lis[i].index = i;
            lis[i].onclick = function(){
                for(var j=0;j<n;j++){
                    Vcity._m.removeClass('on',lis[j]);
                    Vcity._m.addClass('hide',divs[j]);
                }
                Vcity._m.addClass('on',this);
                Vcity._m.removeClass('hide',divs[this.index]);
                /* IE6 改变TAB的时候 改变Iframe 大小*/
                that.changeIframe();
            };
        }
    },

    /* *
     * 城市LINK事件
     *  @linkEvent
     * */

    linkEvent:function(){
        var links = Vcity._m.$('a',this.hotCity);
        var that = this;
        for(var i=0,n=links.length;i<n;i++){
            links[i].onclick = function(){
                window.location.reload();
                that.input.innerHTML = this.innerHTML;//设置选中状态
                document.cookie = 'city=' + this.innerHTML;//设置 cookies选中的城市名称
                document.querySelector('.zp_city_change_name').style.boxShadow = 'none';
                that.input.value = this.innerHTML;
                Vcity._m.addClass('hide',that.cityBox);
                /* 点击城市名的时候隐藏myIframe */
                Vcity._m.addClass('hide',that.myIframe);
            }
        }
    },

    /* *
     * INPUT城市输入框事件
     * @inputEvent
     * */

    inputEvent:function(){
        var that = this;
        Vcity._m.on(this.input,'click',function(event){
            event = event || window.event;
            if(!that.cityBox){
                that.createWarp();
            }else if(!!that.cityBox && Vcity._m.hasClass('hide',that.cityBox)){
                // slideul 不存在或者 slideul存在但是是隐藏的时候 两者不能共存
                if(!that.ul || (that.ul && Vcity._m.hasClass('hide',that.ul))){
                    Vcity._m.removeClass('hide',that.cityBox);

                    /* IE6 移除iframe 的hide 样式 */
                    //alert('click');
                    Vcity._m.removeClass('hide',that.myIframe);
                    that.changeIframe();
                }
            }
        });
        Vcity._m.on(this.input,'focus',function(){
            that.input.select();
            if(that.input.value == '城市名') that.input.value = '';
        });
        Vcity._m.on(this.input,'blur',function(){
            if(that.input.value == '') that.input.value = '城市名';
        });
        Vcity._m.on(this.input,'keyup',function(event){
            event = event || window.event;
            var keycode = event.keyCode;
            Vcity._m.addClass('hide',that.cityBox);
            that.createUl();

            /* 移除iframe 的hide 样式 */
            Vcity._m.removeClass('hide',that.myIframe);

            // 下拉菜单显示的时候捕捉按键事件
            if(that.ul && !Vcity._m.hasClass('hide',that.ul) && !that.isEmpty){
                that.KeyboardEvent(event,keycode);
            }
        });
    },

    /* *
     * 生成下拉选择列表
     * @ createUl
     * */

    createUl:function () {
        //console.log('createUL');
        var str;
        var value = Vcity._m.trim(this.input.value);
        // 当value不等于空的时候执行
        if (value !== '') {
            var reg = new RegExp("^" + value + "|\\|" + value, 'gi');
            var searchResult = [];
            for (var i = 0, n = Vcity.allCity.length; i < n; i++) {
                if (reg.test(Vcity.allCity[i])) {
                    var match = Vcity.regEx.exec(Vcity.allCity[i]);
                    if (searchResult.length !== 0) {
                        str = '<li><b class="cityname">' + match[1] + '</b><b class="cityspell">' + match[2] + '</b></li>';
                    } else {
                        str = '<li class="on"><b class="cityname">' + match[1] + '</b><b class="cityspell">' + match[2] + '</b></li>';
                    }
                    searchResult.push(str);
                }
            }
            this.isEmpty = false;
            // 如果搜索数据为空
            if (searchResult.length == 0) {
                this.isEmpty = true;
                str = '<li class="empty">对不起，没有找到数据 "<em>' + value + '</em>"</li>';
                searchResult.push(str);
            }
            // 如果slideul不存在则添加ul
            if (!this.ul) {
                var ul = this.ul = document.createElement('ul');
                ul.className = 'cityslide';
                this.rootDiv && this.rootDiv.appendChild(ul);
                // 记录按键次数，方向键
                this.count = 0;
            } else if (this.ul && Vcity._m.hasClass('hide', this.ul)) {
                this.count = 0;
                Vcity._m.removeClass('hide', this.ul);
            }
            this.ul.innerHTML = searchResult.join('');

            /* IE6 */
            this.changeIframe();

            // 绑定Li事件
            this.liEvent();
        }else{
            Vcity._m.addClass('hide',this.ul);
            Vcity._m.removeClass('hide',this.cityBox);

            Vcity._m.removeClass('hide',this.myIframe);

            this.changeIframe();
        }
    },

    /* IE6的改变遮罩SELECT 的 IFRAME尺寸大小 */
    changeIframe:function(){
        if(!this.isIE6)return;
        this.myIframe.style.width = this.rootDiv.offsetWidth + 'px';
        this.myIframe.style.height = this.rootDiv.offsetHeight + 'px';
    },

    /* *
     * 特定键盘事件，上、下、Enter键
     * @ KeyboardEvent
     * */

    KeyboardEvent:function(event,keycode){
        var lis = Vcity._m.$('li',this.ul);
        var len = lis.length;
        switch(keycode){
            case 40: //向下箭头↓
                this.count++;
                if(this.count > len-1) this.count = 0;
                for(var i=0;i<len;i++){
                    Vcity._m.removeClass('on',lis[i]);
                }
                Vcity._m.addClass('on',lis[this.count]);
                break;
            case 38: //向上箭头↑
                this.count--;
                if(this.count<0) this.count = len-1;
                for(i=0;i<len;i++){
                    Vcity._m.removeClass('on',lis[i]);
                }
                Vcity._m.addClass('on',lis[this.count]);
                break;
            case 13: // enter键
                this.input.value = Vcity.regExChiese.exec(lis[this.count].innerHTML)[0];
                Vcity._m.addClass('hide',this.ul);
                Vcity._m.addClass('hide',this.ul);
                /* IE6 */
                Vcity._m.addClass('hide',this.myIframe);
                break;
            default:
                break;
        }
    },

    /* *
     * 下拉列表的li事件
     * @ liEvent
     * */

    liEvent:function(){
        var that = this;
        var lis = Vcity._m.$('li',this.ul);
        for(var i = 0,n = lis.length;i < n;i++){
            Vcity._m.on(lis[i],'click',function(event){
                event = Vcity._m.getEvent(event);
                var target = Vcity._m.getTarget(event);
                that.input.value = Vcity.regExChiese.exec(target.innerHTML)[0];
                Vcity._m.addClass('hide',that.ul);
                /* IE6 下拉菜单点击事件 */
                Vcity._m.addClass('hide',that.myIframe);
            });
            Vcity._m.on(lis[i],'mouseover',function(event){
                event = Vcity._m.getEvent(event);
                var target = Vcity._m.getTarget(event);
                Vcity._m.addClass('on',target);
            });
            Vcity._m.on(lis[i],'mouseout',function(event){
                event = Vcity._m.getEvent(event);
                var target = Vcity._m.getTarget(event);
                Vcity._m.removeClass('on',target);
            })
        }
    }
};